<template>
	<view class="body">
		<view class="demand-title">{{demand.title}}</view>
		<view class="demand-main">
			<label class="demand-type"><text>{{demand.typeName}}</text></label>
			<label class="demand-num">{{demand.num}}人</label>
			<label class="demand-time">{{demand.time}}</label>
		</view>
		<view class="title title-detail">需求详情</view>
		<view class="demand-content" v-html="demand.content"></view>
		<view class="demand-images">
			<image v-for="(item,i) in demand.imagesList" :key="i" :src="item"></image>
		</view>
		<view class="title title-user">需求人信息</view>
		<UserItemCard :options="demand.user" @click="goUserInfo"></UserItemCard>
		<view class="title title-demand">需求推荐</view>
		<view class="demand-list">
			<DemandItem v-for="(item,i) in demandList" :key="i" :options="item" @click="goDetail(item)"></DemandItem>
		</view>
		<view class="footer">
			<button type="default" class="sign-btn" @click="onSignClick">报名</button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="popup-header">确认需求信息<label class="close-btn" @click="onPopupClose"></label></view>
				<view class="popup-title">需求详情</view>
				<view class="popup-content" v-html="demand.content">
				</view>
				<view class="popup-title">需求人信息</view>
				<view class="popup-company">{{demand.user.userName}}·{{demand.user.company}}</view>
				<view class="popup-title">发布时间</view>
				<view class="popup-time">{{demand.time}}</view>
				<button type="default" class="sign-sumbit-btn" @click="onSignSumbitClick">确认报名</button>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import DemandItem from '../../components/demand-item.vue'
	import UserItemCard from '../../components/user-Item-Card.vue'
	export default {
		components: {
			DemandItem,
			UserItemCard
		},
		data() {
			return {
				demand: {}, //需求详情
				demandList: [], //需求推荐
				scoreRateHtml: "",
			}
		},
		onLoad(option) {
			this.getDetail(option.id);
			this.getDemandList()
		},
		methods: {
			getDetail: function(id) {
				//调接口取需求详情
				this.demand = {
					title: "这里是需求的文字标题壹贰叁",
					typeName: "市场推广",
					num: 3,
					time: "2021-07-29",
					content: "工作内容：\r\n一对一英语家教，需求要学习英语，从音标入手，需要老师一对一进行辅导。\r\n\r\n工作要求：\r\n1、英语表达流程，具有良好表达能力；\r\n2、要求已有教师资格证(初中英语教师资格证)。",
					imagesList: ["url", "url", "url", "url"],
					user: {
						id: 1,
						head: "url",
						userName: "沈燕",
						company: "公司名称某某某有限公司",
						isAuth: true,
						score: 4.8,
						isArrow: true
					}
				}
			},
			getDemandList: function() {
				//调接口取需求推荐
				for (let i = 1; i <= 10; i++) {
					this.demandList.push({
						id: i,
						title: "招聘派单员",
						userName: "刘小云",
						company: "成都壹贰叁文化有限公司",
						companyIcon: "/static/images/logo.png",
						num: "2",
						time: "2021-07-28",
						typeName: "市场推广"
					})
				}
			},
			onSignClick: function() {
				this.$refs.popup.open();
			},
			onPopupClose: function() {
				this.$refs.popup.close();
			},
			onSignSumbitClick: function() {
				this.onPopupClose()
				// 调提交报名接口
				//成功跳转
				// uni.navigateTo({
				// 	url: "./signSuccess"
				// })
				//失败跳转
				uni.navigateTo({
					url: "./signFail"
				})
			},
			goUserInfo() {
				uni.navigateTo({
					url: "/pages/service/userCard?id=" + this.demand.user.id
				});
			},
			goDetail(e) {
				uni.navigateTo({
					url: './detail?id=' + e.id
				});
			},
		}

	}
</script>

<style>
	.body {
		background-color: #F4F4F4;
	}

	.body>.demand-title {
		font-size: 38rpx;
		color: #181818;
		font-weight: bold;
		padding: 32rpx 32rpx 24rpx 32rpx;
		background-color: #FFFFFF;
	}

	.body>.demand-main {
		background-color: #FFFFFF;
		padding: 0 32rpx 32rpx;
		color: #7B7B7B;
	}

	.demand-main label {
		background-size: 32rpx;
		padding-left: 38rpx;
	}

	.demand-num {
		background-image: url(../../static/images/icon_renshu@3x.png);
		font-size: 24rpx;
	}

	.demand-time {
		background-image: url(../../static/images/icon_shijian@3x.png);
		font-size: 24rpx;
	}

	.demand-type {
		background-image: url(../../static/images/icon_fenlei@3x.png);
	}

	.demand-type text {
		font-size: 20rpx;
	}

	.title {
		margin: 16rpx 0rpx 0;
		background-position: 32rpx center;
		background-repeat: no-repeat;
		background-size: 32rpx;
		padding: 32rpx 32rpx 28rpx 76rpx;
		color: #202020;
		font-size: 32rpx;
		font-weight: 500;
		background-color: #FFFFFF
	}

	.title-detail {
		background-image: url(../../static/images/icon_xuqiu@3x.png)
	}

	.title-user {
		background-image: url(../../static/images/icon_xuqiuren@3x.png)
	}

	.title-demand {
		background-image: url(../../static/images/icon_tips@3x.png)
	}

	.demand-content {
		padding: 0 32rpx;
		font-size: 24rpx;
		color: #5A5A5A;
		background-color: #FFFFFF;
		white-space: pre-line;
	}

	.demand-images {
		padding: 32rpx;
		background-color: #FFFFFF;
		padding-bottom: 0;
	}

	.demand-images image {
		width: 168rpx;
		height: 168rpx;
		background-color: #007AFF;
		border-radius: 8rpx;
		margin-right: 28rpx;
		margin-bottom: 28rpx;
	}


	.demand-list {
		margin: 0;
		padding: 0 32rpx;
		background-color: #FFFFFF;
	}

	.footer {
		height: 98rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
		border-top: 1px solid #DDDDDD;
	}

	.footer .sign-btn {
		width: 400rpx;
		height: 64rpx;
		line-height: 64rpx;
		margin: 17rpx auto;
	}

	.popup-content {
		font-size: 24rpx;
		color: #181818;
		background-color: #F4F4F4;
		padding: 24rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		width: 686rpx;
		margin-bottom: 32rpx;
	}
.popup-content rich-text{
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	
}
	.popup-company,
	.popup-time {
		font-size: 24rpx;
		color: #181818;
		margin-bottom: 32rpx;
	}

	.sign-sumbit-btn {
		margin: 40rpx 0;
	}
</style>
